<template>
  <div class="content">
    <div class="empty" v-if="!titckArr || !titckArr.length">
      <img src="./../../assets/img/noData.png" alt="" />
      <span>暂无泳票</span>
    </div>
    <div class="content-inner" v-else>
      <div class="inner-item" v-for="(item, index) in titckArr.slice().reverse()" :key="index">
        <div class="item-top">
          <div class="item-title">{{ item.ticket_title }}</div>
          <div class="item-payStatus red" v-if="item.status == 'PAYING'">
            支付中
          </div>
          <div
            class="item-payStatus yellow"
            v-else-if="item.status == 'AVAILABLE'"
          >
            待使用
          </div>
          <div class="item-payStatus grey" v-else-if="item.status == 'USED'">
            已使用
          </div>
          <div
            class="item-payStatus grey"
            v-else-if="item.status == 'CANCELLED'"
          >
            已取消
          </div>
        </div>
        <div class="item-content">
          <div class="item-left">
            <img
              :src="
                item.image_url
                  ? item.image_url
                  : 'https://ya30images.hbwlife.com/wxmp/default-pic.png'
              "
            />
          </div>
          <div class="item-right">
            <div class="items center-box">
              <div class="left_times">剩余{{ item.left_times }}次</div>
              <div class="line">/</div>
              <div class="one_day">可使用{{ item.ticket_times }}次</div>
            </div>
            <div class="items">
              有效期：{{ item.start_date }}至{{ item.end_date }}
            </div>
            <div class="items">
              场次时间：{{ item.start_time }}至{{ item.end_time }}
            </div>
            <div class="items">购买时间：{{ item.created_time }}</div>
            <div class="price-wrap">
              <span class="item-unit">￥</span>
              <span class="item-price">{{
                (item?.ticket_price || 0) / 100
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// import wx from 'weixin-js-sdk';
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { showToast } from 'vant'
import { postData } from '@/request/request.js'

let route = useRoute()
let query = route.query
localStorage.clear()
localStorage.setItem('user_id', query.user_id)
localStorage.setItem('access_token', query.access_token)
localStorage.setItem('open_id', query.open_id)
localStorage.setItem('currentPath', query.currentPath)
localStorage.setItem('carriedUserid', query.carriedUserid || '')

const titckArr = ref([])
const carriedUserid = ref('')

const initList = () => {
  postData('/user/ticket/list', {user_id:carriedUserid.value})
    .then((res) => {
      titckArr.value = res?.datas?.tickets || []
    })
    .catch((err) => {
      console.log(err)
    })
}

onMounted(() => {
  carriedUserid.value = route.query.carriedUserid
  initList()
})

watch(
  () => route.fullPath,
  () => {
    carriedUserid.value = route.query.carriedUserid
    initList()
  }
)
</script>

<style scoped>
.empty {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  padding-top: 0.6rem;
}
.empty img {
  width: 0.6rem;
  height: 0.6rem;
}
.empty span {
  margin-top: 0.2rem;
  font-size: 0.14rem;
  color: #969698;
}
.content {
  width: 100%;
  height: auto;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0 0.1rem;
  background: #f7f7f8;
  font-size: 0.16rem;
  color: #333;
}

.content-title {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 0.1rem 0;
}

.content-line {
  width: 0.03rem;
  height: 0.15rem;
  background-color: #d5ad57;
  border-radius: 2px;
  box-sizing: border-box;
}

.index-title {
  color: #151817;
  font-size: 0.16rem;
  margin-left: 0.11rem;
  box-sizing: border-box;
}

.index-title-icon-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.24rem;
  box-sizing: border-box;
  background: #fff;
  padding: 0.1rem;
}

.index-title-icon-item {
  width: 0.465rem;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
}

.index-title-icon {
  width: 0.465rem;
  height: 0.465rem;
  background-color: #fdfbeb;
  border-radius: 50%;
  color: #d5ad57;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.index-title-icon-item-active .index-title-icon {
  background-color: #d5ad57;
  color: #fff;
  box-sizing: border-box;
}

.index-title-icons {
  width: 0.32rem;
  height: 0.32rem;
}

.index-title-icon-txt {
  margin-top: 0.12rem;
  color: #010101;
  box-sizing: border-box;
}

.content-inner {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 0.17rem;
}

.inner-item {
  width: 100%;
  height: auto;
  padding: 0.05rem;
  box-sizing: border-box;
  margin-top: 0.1rem;
  background: #fff;
}
.item-top {
  height: 0.4rem;
  line-height: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #efefef;
}
.item-payStatus {
  font-size: 0.14rem;
}
.red {
  color: #dd524d;
}
.yellow {
  color: #d5ad57;
}
.grey {
  color: #969698;
}
.item-content {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.1rem;
  background: #fff;
}

.item-left {
  width: 0.6rem;
  height: auto;
}

.item-left img {
  width: 0.6rem;
  height: 0.6rem;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 0.06rem;
}

.item-right {
  flex: 1;
  /* padding: 0.1rem 0 0.1rem 0.1rem; */
  margin-left: 0.2rem;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: flex-start;
}

.items {
  color: #1a1b1d;
  box-sizing: border-box;
  margin-top: 0.075rem;
}
.center-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.075rem;
  color: #1a1b1d;
}
.center-box .line {
  margin: 0 0.1rem;
  width: 0.01rem;
  height: auto;
  color: #969698;
}
.item-date {
  color: #1a1b1d;
  margin-top: 0.04rem;
  box-sizing: border-box;
}
.item-time {
  color: #1a1b1d;
  margin-top: 0.04rem;
  box-sizing: border-box;
}

.price-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.1rem;
  box-sizing: border-box;
  color: #c18d1e;
  font-size: 0.16rem;
}

.item-unit {
  font-size: 24rpx;
}
.item-price {
  margin-left: 5rpx;
  font-size: 32rpx;
}
.item-qi {
  margin-left: 20rpx;
  font-size: 24rpx;
}
.pay-wrap {
  width: 133rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pay-btn {
  width: auto;
  height: auto;
  padding: 15rpx 30rpx;
  border-radius: 11rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #e26f21;
  box-sizing: border-box;
  font-size: 28rpx;
}
.free-btn {
  background: #d5ad57;
}

.index-venue-item {
  align-items: flex-start;
}

.index-grid-wrap {
  width: 100%;
  height: auto;
  display: grid;
  gap: 20rpx;
  grid-template-columns: 1fr 1fr 1fr;
  /* 两列，每列宽度相等 */
  grid-template-rows: auto;
  /* 自动高度 */
  margin-top: 20rpx;
}

.index-content-item {
  width: 1fr;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.index-content-item image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}

.index-grid-title {
  color: #010101;
  margin-top: 10rpx;
  font-weight: 500;
}

.index-venue-item .item-left image {
  width: 100%;
}

.ticket_times {
  color: #aa9114;
  margin-right: 0.1rem;
}
</style>
